<template>
  <div class="admin">
    <el-container>
      <el-header style="display: flex; justify-content: space-between">
         <div>
          <el-dropdown>
            <img
              src="https://tse4-mm.cn.bing.net/th/id/OIP-C.v4hKapv3pUtbBdDJAsjcJgHaEo?w=203&h=127&c=7&r=0&o=5&dpr=1.5&pid=1.7"
              alt=""
            />
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item>查看详情</el-dropdown-item>
              <el-dropdown-item>相思情缠</el-dropdown-item>
              <el-dropdown-item @click.native="login"
                >退出登录</el-dropdown-item
              >
            </el-dropdown-menu>
          </el-dropdown>
          <span class="img"> {{ name }}</span>
        </div>
        <div>Agony档案管理</div>
        <i v-if="isshow" @click="isshow = !isshow" class="el-icon-open ig"></i>
        <i v-else @click="isshow = !isshow" class="el-icon-turn-off ig"></i>
        <!-- <mark style="color: rgb(15, 223, 238)">丑点怎么了 吃你家小米了</mark> -->
      </el-header>
      <el-container>
        <el-aside
          v-if="isshow"
          width="200px"
        >
          <el-menu router>
            <!-- 循环一级路由 -->
            <el-menu-item
              v-for="(item, index) in navroutes"
              :key="index"
              :index="item.path"
            >
              <i :class="item.meta.iconCls" />{{ item.name }}
            </el-menu-item>
          </el-menu>
        </el-aside>
        <el-aside
          v-else
          width="50px"
        >
          <el-menu router>
            <!-- 循环一级路由 -->
            <el-menu-item
              v-for="(item, index) in navroutes"
              :key="index"
              :index="item.path"
            >
              <i :class="item.meta.iconCls" />
            </el-menu-item>
          </el-menu>
        </el-aside>
        <el-main>
          <router-view></router-view>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script>
import routes from '../../router/index'
export default {
  data () {
    return {
      name: '',
      navroutes: [],
      isshow: true
    }
  },
  created () {
    if (localStorage.getItem('user')) {
      this.name = localStorage.getItem('user')
    } else {
      this.name = '未登录'
    }
  },
  mounted () {
    this.init()
  },
  methods: {
    // 初始逻辑判断
    init () {
      // 判断导航路由
      const fili = routes.options.routes[2].children
      this.navroutes = fili.filter((item) => item.meta.isNav)
      // 角色鉴权路由
      // this.navroutes = this.navroutes.filter(item => item.meta.roles.includes(role))
    },
    login () {
      this.$confirm('确定退出？', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        localStorage.removeItem('user')
        localStorage.removeItem('pwd')
        localStorage.removeItem('Token')
        location.reload()
      })
    }
  }
}
</script>
<style scoped>
img {
  width: 96px;
  border-radius: 10%;
}
.img {
  display: inline-block;
  color: rgb(231, 57, 179);
  transform: translateY(-20px);
  margin-left: 10px;
}
.ig {
  margin-top: 11px;
  width: 30px;
  font-size: 40px;
}
.el-header {
  background-color: #b3c0d1;
  color: #333;
  line-height: 60px;
}
.el-main {
  margin: 0;
}
.el-aside {
  color: #333;
}
</style>
